<template>
    <el-container>
  <el-header style="width:1800px">
    <el-row>
      <el-card class="box-card">
            <el-col :span="2" :offset="0">
                优惠卷查询
            </el-col>
            
      </el-card>
    </el-row>
  </el-header>
  <el-container>
    <el-main>
      <el-row :gutter="20">
       <el-card class="box-card" style="width:1800px">
          <div slot="header" class="clearfix">
            
            <span><i class="el-icon-search"></i>筛选查询</span>
            <el-button style="float:right" @click="mohu">查询</el-button>
          </div>
          <div>
            <el-form  ref="form" :model="mohuForm"  label-width="80px" :inline="false" size="normal">
              <el-col :span="4" :offset="0">
              <el-form-item label="用户账号" label-width="100px">
              <el-input v-model="mohuForm.account"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0" :push="2">
              <el-form-item label="用户昵称" label-width="100px">
                   <el-input v-model="mohuForm.nikename"> </el-input>
              </el-form-item>
            </el-col>
            </el-form>
          </div>
        </el-card>
      </el-row>
      <el-row :gutter="20">
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>数据列表</span>
    
    </div>
  <div>
     <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="userId"
      label="用户ID"
      width="100px"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="userAccount"
      label="用户账号"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="nikename"
      label="用户昵称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="ysy"
      label="已使用"
      align="center"
      >
    </el-table-column>
    <el-table-column
    
      prop="wsy"
      label="未使用"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="ygq"
      label="已过期"
      width="150px"
      align="center"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="WatchClick(scope.row,scope.$index)" type="text" size="medium">查看明细</el-button>
        <el-button type="text" @click="givCoupon(scope.row,scope.$index)" size="medium">赠送优惠卷</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 点击查看明细按钮的弹窗 -->
  <el-dialog title="明细" :visible.sync="dialogWatch" width="80%" :before-close="dialogClose" :fullscreen="true" :destroy-on-close="true">
       <el-table
       :data="Watch"
        border
        style="width: 100%">
        <el-table-column
          prop="userId"
          label="用户ID"
          >
        </el-table-column>
        <el-table-column
          prop="userAccount"
          label="用户账号"
          >
        </el-table-column>
        <el-table-column
          prop="nikename"
          label="用户昵称">
        </el-table-column>
        <el-table-column
          prop="ysy"
          label="已使用"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="wsy"
          label="未使用"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="ygq"
          label="已过期"
          align="center"
          >
        </el-table-column>
      </el-table>

      
       <el-table 
       :data="WatchDetail.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        style="width: 100%;margin-top:30px">
        <el-table-column
          prop="couponName"
          label="优惠卷名称"
          >
        </el-table-column>
        <el-table-column
          prop="couponPrice"
          label="面额"
          >
        </el-table-column>
        <el-table-column
          prop="grant"
          label="领取方式">
          <template slot-scope="scope">
            <!-- scope.row 包含表格里当前行的所有数据 -->
            <span :class="scope.row.grant?'act':'inact'">
                {{scope.row.grant | couponCstatus}}<br>
            </span>
        </template>
        </el-table-column>

        <el-table-column
          prop="getDate"
          label="领取时间"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="useDate"
          label="使用时间"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="订单编号"
          align="center"
          >
        </el-table-column>
        <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="WatchClick(scope.row,scope.$index)" type="text" size="medium">查看</el-button>
      </template>
    </el-table-column>
      </el-table>
<!-- 分页 -->
    <el-col :span="5" :offset="0" :push="15" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
             background
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="WatchDetail.length">
        </el-pagination>
    </el-col>

  </el-dialog>
  <!-- 点击赠送按钮的弹窗 -->
   <el-dialog
      width="30%"
      title="赠送优惠卷"
      :visible.sync="dialogGiv"
      >
      <el-row :gutter="10">
    <el-table
    :data="couponData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    border
    style="width: 100%"
    @select="selectGiveCoupon">
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column
      prop="couponName"
      label="优惠卷名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="couponPrice"
      label="面额"
      width="180">
    </el-table-column>
    <el-table-column
      prop=""
      label="使用条件">
    </el-table-column>
  </el-table>
  
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12" :push="19">
        <el-button type="primary" round @click="giveCoupons">确认</el-button>
      </el-col>
    </el-row>
    
    </el-dialog>
</div>



  <!-- 分页 -->
    <el-col :span="5" :offset="0" :push="15" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
             background
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
    </el-col>
</el-card>
      </el-row>
      
    </el-main>
  </el-container>
</el-container>
 
</template>

<script>
import qs from 'qs'
export default {
    data() {
      return {
        //表单标题的宽
        formLabelWidth:"120px",
        //控制赠送优惠卷页面的变量
        dialogGiv:false,
        //控制查看页面的变量
        dialogWatch:false,
        //控制编辑页面的变量
        dialogUpdate:false,
        //控制添加页面的变量
        dialogAdd:false,
        //查看页面数据
        Watch:[],
        //查看页面明细数据
        WatchDetail:[],
        //模糊查表单数据
        mohuForm:{},
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 5, // 每页的数据条数
        //  表格数据
        tableData: [],
        //优惠卷数据
        couponData:[],
        //选取要赠送优惠卷的数据
        giveCoupon:[],
        //用户id
        uid:0
      }
    },
    methods:{
      giveCoupons(){
        var params = new URLSearchParams();
        params.append("coupons",this.giveCoupon);
        params.append("uid",this.uid);
          this.$http.post("/Coupon/giveCoupon",
          params
          ).then(res=>{
            
          })
      },
      selectGiveCoupon(selection, row){
        
        // selection是获取的所有选取的数据
        // row是获取当前选择行的
        for(let i=0;i<selection.length;i++){
          if(this.giveCoupon[i]!=selection[i].couponId){
            this.giveCoupon.push(selection[i].couponId)
          }
          
        }
       
        console.log(selection)
        console.log(this.giveCoupon)
        console.log(this.uid)
        
      },
      givCoupon(row,index){
          this.dialogGiv=true
          this.uid=row.userId
          console.log(this.couponData)
      },
      mohu(){
        this.$http.get('/Coupon/getUserConpon',{
          params:{
              account:this.mohuForm.account,
              nikename:this.mohuForm.nikename
          }
        }).then(res=>{
           this.tableData=res.data
        })
       
      },
      
      dialogClose(done){
        done()
        setTimeout(()=>{
          this.Watch=[]
        },100)
       
      },
      //查看按钮点击事件
      WatchClick(row,index){
          this.dialogWatch=true;
          for (let i = 0; i<this.tableData.length; i++){
                    if (this.tableData[i] == row){
                    this.Watch.push(this.tableData[i]);
                    }
                }
          this.$http.get('/Coupon/getUserConponUsed',{
           params:{
             uid:row.userId
           }
          }).then(res=>{
            this.WatchDetail=res.data
              console.log(res)
          })
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      // 获取表格数据
       getTableData(){
          this.$http.get('/Coupon/getUserConpon').then(res=>{
              this.tableData=res.data
          })
         
          
      }
    },
    
    filters:{
      // 过滤审核状态
      couponCstatus(status){
        if(status==2){
          return '自动发放'
        }else if(status==3){
          return '活动领取'
        }else if(status==4){
          return '人工发放'
        }else if(status==5){
          return '无限制'
        }
      }
    },
    created(){
      this.getTableData();
       if(this.$store.state.coupon.length==0){
            this.$http.get('/Coupon/getTableData').then(res=>{
              this.$store.state.coupon=res.data
              console.log(this.$store.state.coupon)
              this.couponData=this.$store.state.coupon
            })
          }
        
    }


}
</script>


<style lang="scss" scoped>
body{
  background: #F9F9F9;
}
.el-header {
    margin-bottom: 50px;
    // background-color: #6BC9BB;
    // background-color: #F2F6FC;
    color: #333;
    text-align: center;
    // line-height: 60px;
  }
.el-row{
  margin-bottom: 30px;
}
</style>